import React from 'react'
import {Route} from 'react-router-dom'
import Index from '../index'
import News from '../news'
import List from '../list'
import Profile from '../profile'
import { TabBar } from 'antd-mobile'
import './index.css'

export default class Home extends React.Component {
  state = {
    selectedTab: this.props.history.location.pathname
  }

  shouldComponentUpdate(props) {
    if(props.location.pathname !== this.state.selectedTab) {
      this.setState({
        selectedTab: props.location.pathname
      })
    }

    return true
  }

  render() {
    return (
      <div className="home-box">
        <Route exact path="/home" component={Index} />
        <Route path="/home/news" component={News} />
        <Route path="/home/list" component={List} />
        <Route path="/home/profile" component={Profile} />

        <div style={ { position: 'fixed', height: 50, width: '100%', bottom: 0 } } className="tabbar-box">
          <TabBar
            unselectedTintColor="#949494"
            tintColor="green"
            barTintColor="white"
            noRenderContent={true}
          >
            <TabBar.Item
              title="首页"
              key="Life"
              icon={<i className="iconfont icon-ind"/>}
              selectedIcon={<i className="iconfont icon-ind"/>}
              selected={this.state.selectedTab === '/home'}
              onPress={() => {
                this.setState({
                  selectedTab: '/home',
                });
                this.props.history.push('/home')
              }}
              data-seed="logId"
            >
            </TabBar.Item>
            <TabBar.Item
              icon={<i className="iconfont icon-findHouse"/>}
              selectedIcon={<i className="iconfont icon-findHouse"/>}
              title="找房"
              key="Koubei"
              selected={this.state.selectedTab === '/home/list'}
              onPress={() => {
                this.setState({
                  selectedTab: '/home/list',
                });
                this.props.history.push('/home/list')
              }}
              data-seed="logId1"
            >
            </TabBar.Item>
            <TabBar.Item
              icon={<i className="iconfont icon-infom"/>}
              selectedIcon={<i className="iconfont icon-infom"/>}
              title="咨询"
              key="Friend"
              selected={this.state.selectedTab === '/home/news'}
              onPress={() => {
                this.setState({
                  selectedTab: '/home/news',
                });
                this.props.history.push('/home/news')
              }}
            >
            </TabBar.Item>
            <TabBar.Item
              icon={<i className="iconfont icon-my"/>}
              selectedIcon={<i className="iconfont icon-my"/>}
              title="我的"
              key="my"
              selected={this.state.selectedTab === '/home/profile'}
              onPress={() => {
                this.setState({
                  selectedTab: '/home/profile',
                });
                this.props.history.push('/home/profile')
              }}
            >
            </TabBar.Item>
          </TabBar>
        </div>
        
      </div>
    )
  }
}
